<template>
  <DialogBox
    :visible="boxVisibility"
    @update:visible="boxVisibility = $event"
    resize
    max-height="600"
    title="品牌部计算工单难度"
    width="40%"
    :close-on-click-modal="false"
  >
    <Form ref="ruleFormRef" label-width="120px" :model="createData" :rules="rules">
      <FormItem label="工单名称" prop="order_name">
        <Input v-model="createData.order_name" disabled></Input>
      </FormItem>
      <FormItem label="修图类型" prop="detail_id">
        <div style="display: flex;">
          <Select v-model="createData.detail_id" style="flex: 3;">
            <Option v-for="item in difficultyOp" :key="item.detail_id" :label="item.detail_name" :value="item.detail_id"></Option>
          </Select>
          <Input v-model="createData.detail_value" style="flex: 1;margin-left: 5px;"  placeholder="请输入数量" ></Input>
          <Input
            type="number"
            v-model="createData.detail_cost"
            style="flex: 1;margin-left: 5px;"
            placeholder="耗时"
            :min="0"
          ></Input>分钟
          <Plus class="Plus" @click="add"></Plus>
        </div>
        <div v-for="(item, index) in list" :key="item.detail_id + index" style="display: flex;margin-top: 5px;">
          <Select v-model="item.detail_id" style="flex: 3;">
            <Option v-for="item in difficultyOp" :key="item.detail_id" :label="item.detail_name" :value="item.detail_id"></Option>
          </Select>
          <Input v-model="item.detail_value" style="flex: 1;margin-left: 5px;"  placeholder="请输入数量"></Input>
          <Input
            type="number"
            v-model="item.detail_cost"
            style="flex: 1;margin-left: 5px;"
            placeholder="耗时"
            :min="0"
          ></Input>分钟
          <PanelMini class="Plus" @click="remove(index)"></PanelMini>
        </div>
      </FormItem>
    </Form>
    <template #footer>
    <Button type="primary" @click="submitClick"> 确定 </Button>
    <Button type="primary" @click="boxVisibility = false"> 取消 </Button>
    </template>
  </DialogBox>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { Button, DialogBox, Form, FormItem, Input, Option, Select, Modal } from '@opentiny/vue'
import { getRetouchOrder, getOrderDifficultyDetail } from '@/request/api'
import { IconPlus, IconPanelMini } from '@opentiny/vue-icon'
import { isJSON } from 'untils'
const Plus = IconPlus()
const PanelMini = IconPanelMini()
const  props = defineProps({
  basicGridRef: Object
})
const boxVisibility = ref(false)
const createData = ref({
  order_name: '',
  detail_id: '',
  detail_value: '',
  detail_cost: ''
})
const ruleFormRef = ref()
const difficultyOp = ref([])
const list = ref([])
const curRow = ref({})
const rules = ref(
  {
    order_name: [
      { required: true, message: '必填', trigger: 'change' },
    ],
    detail_id: [
      { required: true, message: '必填', trigger: 'submit' },
    ]
  }
)
const open = (row) => {
  curRow.value = row 
  boxVisibility.value = true
  createData.value.order_name = row.order_name
  if (isJSON(row.order_difficulty_detail)) {
    const detail = JSON.parse(row.order_difficulty_detail).order_difficulty_detail
    if (detail.length) {
      createData.value.detail_id = detail[0].detail_id
      createData.value.detail_value = detail[0].detail_value
      createData.value.detail_cost = detail[0].detail_cost
      if (detail.length > 1) {
        list.value = detail.filter((item,index) => index > 0)
      }
    }
  }
}
const remove = (num) => {
  list.value = list.value.filter((item,index) => index !== num)
}
const add = () => {
  if (!createData.value.detail_id || !createData.value.detail_value || !createData.value.detail_cost) {
    Modal.alert('请选填一组数据', '提示')
  } else {
    if (list.value.length < 5) {
      const obj = { ...createData.value }
      list.value.unshift({
        detail_id: obj.detail_id,
        detail_value: obj.detail_value,
        detail_cost: obj.detail_cost,
      })
      createData.value.detail_id = ''
      createData.value.detail_value = ''
      createData.value.detail_cost = ''
    } else {
      Modal.alert('最多六组数据', '提示')
    }
  }
}
const submitClick = () => {
  ruleFormRef.value.validate(val => {
    if (val) {
      const formData = new FormData()
      formData.append('flag', 3)
      formData.append('order_id', curRow.value.order_id)
      let order_difficulty_detail = [{
        detail_id: createData.value.detail_id,
        detail_value: createData.value.detail_value,
        detail_cost: createData.value.detail_cost
      }] 
      if (list.value.length) {
        order_difficulty_detail = order_difficulty_detail.concat(list.value) 
      }
      formData.append('order_difficulty_detail', JSON.stringify(order_difficulty_detail))
      getRetouchOrder(formData, 'put').then(res => {
      if (res?.data?.ret === 0) {
        list.value = []
        createData.value = {
          order_name: '',
          detail_id: '',
          detail_value: '',
          detail_cost: ''
        }
        props.basicGridRef.handleFetch()
        boxVisibility.value = false
      } else {
        Modal.message({ message: res.data.msg, status: 'error' })
      }
    })
    }
   })
}
onMounted(() => {
  getOrderDifficultyDetail().then(res => {
    if (res?.data?.ret === 0) {
      difficultyOp.value = res.data.result
    }
  })
})
defineExpose({
  open
})
</script>
<style lang="scss" scoped>
.Plus {
  margin-left: 5px;
  font-size: 26px;
  fill: #5e7ce0
}
.Plus:hover {
  transform: scale(1.2, 1.2);
  fill: #5e7ce0;
}
</style>